﻿<!DOCTYPE HTML>
<html>
<head>
	<title>Client side conversion of InkML to SVG Example</title>
	<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.5.min.js"></script>
	<script type="text/javascript" src="inkml.js"></script>
	<script type="text/javascript">
		$(this).ready(function ()
		{
			var doc = $(this).get(0);

			$.get("ink1.xml", {}, function (xml, textStatus, jqXHR)
			{
				// load the original inkml into the left iframe
				var inkml1 = formatXml(jqXHR.responseText);
				var iframe1 = doc.getElementById("xml-before");
				if (doc.body.innerText)
				{
					// innerText null on FF, works on all other browsers
					// TODO: leading whitespace stripped on WebKit and Opera
					iframe1.contentWindow.document.body.innerText = inkml1;
				}
				else
				{
					// for FF only, but textContent strips all whitespace
					iframe1.contentWindow.document.body.textContent = inkml1;
				}

				// load the inkml then save it back.
				var ink = new Ink(xml);
				var inkml = ink.toInkML();

				// load the round-tripped inkml into the right iframe
				var serializer = new XMLSerializer();
				var inkml2 = formatXml(serializer.serializeToString(inkml));

				var iframe2 = doc.getElementById("xml-after");
				if (doc.body.innerText)
				{
					// innerText null on FF, works on all other browsers
					// TODO: leading whitespace stripped on WebKit and Opera
					iframe2.contentWindow.document.body.innerText = inkml2;
				}
				else
				{
					// for FF only, but textContent strips all whitespace
					iframe2.contentWindow.document.body.textContent = inkml2;
				}
			});
		});


		// pretty print xml from http://stackoverflow.com/questions/376373/pretty-printing-xml-with-javascript
		function formatXml(xml)
		{
			var formatted = '';
			var reg = /(>)(<)(\/*)/g;
			xml = xml.replace(reg, '$1\r\n$2$3');
			var pad = 0;
			jQuery.each(xml.split('\r\n'), function (index, node)
			{
				var indent = 0;
				if (node.match(/.+<\/\w[^>]*>$/))
				{
					indent = 0;
				} else if (node.match(/^<\/\w/))
				{
					if (pad != 0)
					{
						pad -= 1;
					}
				} else if (node.match(/^<\w[^>]*[^\/]>.*$/))
				{
					indent = 1;
				} else
				{
					indent = 0;
				}

				var padding = '';
				for (var i = 0; i < pad; i++)
				{
					padding += ' ';
				}

				formatted += padding + node + '\r\n';
				pad += indent;
			});

			return formatted;
		}

	</script>
	<style type="text/css">
		.auto-style2
		{
			font-family: "Courier New" , Courier, monospace;
		}
		.style1
		{
			width: 100%;
		}
		#drop_zone
		{
			border: 2px dashed #bbb;
			-moz-border-radius: 5px;
			-webkit-border-radius: 5px;
			border-radius: 5px;
			padding: 25px;
			text-align: center;
			font: 20pt bold 'Vollkorn';
			color: #bbb;
			width: 600px;
			height: 300px;
		}
		#drop_message
		{
		}
		#CaptureCanvas
		{
			border: 2px dashed #bbb;
		}
		#CaptureRender
		{
			border: 2px dashed #bbb;
		}
	</style>
</head>
<body>
	<h1>
		Client side conversion of InkML to SVG Example</h1>
	<p>
		Source PowerPoint file: <a href="ink.pptx">ink.pptx</a>.</p>
	<p>
		<img alt="ink.pptx" src="ink.png" /></p>
	<p>
		The InkML part of the PowerPoint PPTX file above is here: <a href="ink1.xml">ink1.xml</a>.
	</p>
	<table class="style1">
		<tr>
			<td>
				This is the original InkML generated by PowerPoint 2010:
			</td>
			<td>
				This is the InkML loaded by the JavaScript library and then saved back out:
			</td>
		</tr>
		<tr>
			<td>
				<iframe id="xml-before" style="width: 100%; height: 100%"></iframe>
			</td>
			<td>
				<iframe id="xml-after" style="width: 100%; height: 100%"></iframe>
			</td>
		</tr>
	</table>
	<p>
		Below is the InkML part rendered directly in the browser.
	</p>
	<table class="style1">
		<tr>
			<td>
				Ignoring pressure, drawing continuous, single width strokes:
			</td>
			<td>
				Using pressure, drawing line segments with variable widths:
			</td>
		</tr>
		<tr>
			<td>
				<canvas id="Canvas1" width="600" height="300" data-inkml-src="ink1.xml" data-inkml-ignorepressure="true">
				</canvas>
			</td>
			<td>
				<canvas id="Canvas2" width="600" height="300" data-inkml-src="ink1.xml">
				</canvas>
			</td>
		</tr>
	</table>
	<p>
		Draw some ink below
	</p>
	<canvas id="CaptureCanvas" width="600" height="300" data-inkml-trg="0" onclick="void(0)">
	</canvas>
	<p>
		The ink is rendered directly into an HTML5 canvas element via a JavaScript function
		that converts the InkML traces into SVG strokes.&nbsp;&nbsp; The inkml to be rendered
		is specified using a <span class="auto-style2">data-inkml-src</span> attribute on
		the <span class="auto-style2">&lt;canvas&gt;</span> element.&nbsp;&nbsp; For example:</p>
	<pre>&lt;canvas width=&quot;600&quot; height=&quot;200&quot; data-inkml-src=&quot;ink1.xml&quot;&gt;&lt;/canvas&gt;</pre>
	<div id="drop_zone">
		<div id="drop_message">
			Drop InkML files here
		</div>
		<canvas id="CanvasRender" width="600" height="300">
		</canvas>
	</div>
	<output id="list">
	</output>
	<script type="text/javascript">
		function handleFileSelect(evt)
		{
			evt.stopPropagation();
			evt.preventDefault();

			var files = evt.dataTransfer.files; // FileList object.

			if (files == null)
			{
				alert("Drag and drop of Files is not supported in this browser.  Latest version of Chrome and FireFox work.  IE9, Safari, and Opera do not work.");
				return;
			}

			// files is a FileList of File objects. List some properties.
			var output = [];
			for (var i = 0, f; f = files[i]; i++)
			{
				output.push('<li><strong>', f.name, '</strong> (', f.type || 'n/a', ') - ',
						f.size, ' bytes</li>');

				var reader = new FileReader();

				reader.onload = (function (theFile)
				{
					return function (e)
					{
						// hide the "drop here" message
						document.getElementById('drop_message').style.visibility = "hidden";

						// get the inkml
						var inkml = e.target.result;

						// get the canvas
						var canvas = $(document).find('#CanvasRender').get(0);
						var drop_zone = $(document).find('#drop_zone').get(0);

						// create the ink object
						var ink = new Ink(inkml);

						// clear any junk that may already be on the canvas
						ink.clear(canvas);

						// get the new width and height
						var width = ink.getPixelWidth();
						var height = ink.getPixelHeight();

						//canvas.width = width;
						//canvas.height = height;
						//canvas.style = "width:" + width + "px; height:" + height + "px;";
						//drop_zone.style = "width:" + width + "px; height:" + height + "px;";

						// draw the ink
						ink.draw(canvas, true);
					};
				})(f);

				reader.readAsText(f);
			}
			document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
		}

		function handleDragOver(evt)
		{
			evt.stopPropagation();
			evt.preventDefault();
		}

		// Setup the dnd listeners.
		var dropZone = document.getElementById('drop_zone');
		dropZone.addEventListener('dragover', handleDragOver, false);
		dropZone.addEventListener('drop', handleFileSelect, false);
	</script>
	<p>
		Tested on the following browsers: IE9 RC, Chrome 9.0.597.98, FireFox 3.6.13, Opera
		11.01, and Safari 5.0.3.&nbsp; Uses jQuery 1.5 for XML loading and parsing.
	</p>
</body>
</html>
